<template>
  <div class="global">
    <div>
      <!-- 用户顶部操作 -->
      <div style="margin-bottom: 10px; margin-left: 10px">
        <el-card shadow="hover">
          <div style="margin-right: 10px">
            <el-button type="primary" @click="change" plain :disabled="isAdmin"
              ><el-icon style="margin-right: 3px"><Plus /></el-icon
              >新增</el-button
            >
          </div>
        </el-card>
      </div>

      <!-- 用户数据表格展示 -->
      <div>
        <el-card shadow="hover">
          <el-scrollbar height="520px">
            <el-collapse v-for="(item, index) in data" :key="index">
              <el-collapse-item :title="item.name" :name="index">
                <div style="margin-left: 1100px">
                  <el-button
                    @click="updateDept(item.id)"
                    type="success"
                    size="small"
                    :icon="Edit"
                    :disabled="isAdmin"
                  />
                  <el-popconfirm
                    title="确定要删除吗?"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    @confirm="confirmEvent(item.id)"
                  >
                    <template #reference>
                      <el-button type="danger" size="small" :icon="Delete" :disabled="isAdmin"
                    /></template>
                  </el-popconfirm>
                </div>
                <div>
                  <el-scrollbar height="150px">
                    <el-table :data="item.userData" stripe style="width: 100%">
                      <el-table-column
                        fixed
                        prop="role"
                        label="角色"
                        width="200"
                      />
                      <el-table-column prop="avatar" label="头像" width="240">
                        <template #default="scope">
                          <div style="display: flex; align-items: center">
                            <el-image
                              style="
                                border-radius: 100%;
                                width: 50px;
                                height: 50px;
                              "
                              :src="scope.row.avatar"
                            />
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="phone"
                        label="手机号"
                        width="260"
                      />
                      <el-table-column
                        prop="status"
                        key="status"
                        label="状态"
                        width="610"
                      >
                        <template #default="scope">
                          <el-switch
                            disabled
                            v-model="scope.row.status"
                            :active-value="0"
                            :inactive-value="1"
                          ></el-switch>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-scrollbar>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-scrollbar>
        </el-card>
      </div>
    </div>
  </div>

  <!-- 用户数据搜集对话框 -->
  <el-dialog
    v-model="dialogFormVisible"
    title="新增部门"
    :center="true"
    :align-center="true"
    width="500px"
    :show-close="false"
  >
    <el-form
      :label-position="right"
      label-width="100px"
      :model="deptForm"
      class="el_form"
      ref="ruleFormRef"
      :rules="rules"
    >
      <el-form-item label="部门名称" prop="name" label-width="100px">
        <el-input
          v-model="deptForm.name"
          size="large"
          placeholder="请输入部门名称"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog_footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="saveUser"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Plus, Delete, Edit } from "@element-plus/icons-vue";
import { list, save, updateById, update, removeById } from "@/api/department";
import { useTokenStore } from "@/stores/token";
const TokenStore = useTokenStore();

///////////////////////////////////////////////////////////////////数据区
const data = ref([]);
const dialogFormVisible = ref(false);
//保存用户
const deptForm = ref({
  id: null,
  name: "",
});

///////////////////////////////////////////////////////////////////////////方法区
//异步获取用户分页数据
//检测是否是测试账号
const isAdmin = ref(false)
onMounted(async () => {
  //检测是否是测试账号
  isAdmin.value = TokenStore.isAdmin;
  const res = await list();
  data.value = res.data;
});

//异步获取用户分页数据
function initList() {
  list().then((res) => {
    if (res.code === 200) {
      data.value = res.data;
    }
  });
}

//新增用户弹框
function change() {
  dialogFormVisible.value = !dialogFormVisible.value;
}

//表单校验
const ruleFormRef = ref(null);
// 校验规则
const rules = {
  name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
};

//新增 部门
function saveUser() {
  //表单校验
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      if (!deptForm.value.id) {
        //新增用户
        save(deptForm.value).then((res) => {
          if (res.code === 200) {
            ElMessage({
              showClose: true,
              message: "保存成功！",
              type: "success",
            });
            //异步请求用户分页数据
            initList();
          }
        });
      } else {
        //修改用户
        update(deptForm.value).then((res) => {
          if (res.code === 200) {
            ElMessage({
              showClose: true,
              message: "修改成功！",
              type: "success",
            });
            //异步请求用户分页数据
            initList();
          }
        });
      }
      dialogFormVisible.value = false;
      cancel();
    }
  });
}

//取消
function cancel() {
  deptForm.value.name = "";
  dialogFormVisible.value = false;
}

//修改部门
function updateDept(id) {
  dialogFormVisible.value = !dialogFormVisible.value;
  updateById(id).then((res) => {
    if (res.code === 200) {
      deptForm.value = res.data;
    }
  });
}

//删除部门
function confirmEvent(id) {
  removeById(id).then((res) => {
    if (res.code === 200) {
      ElMessage({
        type: "success",
        message: "删除成功",
        customClass: "系统提示",
      });
      //异步请求用户分页数据
      initList();
    }
  });
}
</script>

<style scoped>
.global {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #f5f5f5;
  height: 85vh;
}
.pagenation {
  margin-top: 15px;
  margin-left: 500px;
}

.el-input {
  width: 260px;
}

.el_form {
  margin-top: 10px;
  margin-left: 40px;
}

.dialog_footer {
  margin-left: 260px;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}

.avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
  